<script setup lang="ts">
defineOptions({
  name: "ALL_FAB_COMMON_QUERY"
});

import fabCommonQueryProduction from "./components/fabCommonQueryProduction.vue";
import fabCommonQueryOperation from "./components/fabCommonQueryOperation.vue";
import fabCommonQueryBoard from "./components/fabCommonQueryBoard.vue";
import fabCommonQueryAbnormal from "./components/fabCommonQueryAbnormal.vue";
</script>

<template>
  <div class="fab-common-query-box">
    <div class="fab-common-query">
      <div class="fab-common-query-production">
        <fabCommonQueryProduction />
      </div>
      <div class="fab-common-query-operation">
        <fabCommonQueryOperation />
      </div>
      <div ref="fabCommonQueryBoardRef" class="fab-common-query-board">
        <fabCommonQueryBoard />
      </div>
      <div ref="fabCommonQueryAbnormalRef" class="fab-common-query-abnormal">
        <fabCommonQueryAbnormal />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fab-common-query-box {
  box-sizing: border-box;
  height: 100%;

  .fab-common-query {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 33.33%);
    gap: 16px;
    width: calc(100% - 32px);
    height: 100%;

    .fab-common-query-production {
      grid-area: 1 / 1 / 3 / 2;
    }

    .fab-common-query-operation {
      grid-area: 1 / 2 / 3 / 3;
    }

    .fab-common-query-board {
      grid-area: 1 / 3 / 2 / 4;
    }

    .fab-common-query-abnormal {
      grid-area: 2 / 3 / 3 / 4;
    }
  }
}
</style>
